<template>
  <div>
    <!-- 声明式渲染 -->
    <div>
      {{ msg }}
    </div>
    <!-- 1.2 指令 -->
    <div>
      <span v-bind:title="msg">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    <div>
      <!-- 1.3 条件判断 -->
      <span v-if="seen"> 条件判断 </span>
    </div>
    <!-- 1.4 循环 -->
    <div>
      <ol>
        <li v-for="language in languages">
          {{ language }}
        </li>
      </ol>
    </div>
    <!-- 1.5 用户输入 -->
    <div>
      <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <!-- 1.6 双向绑定 -->
    <div>
      <input v-model="msg" />
    </div>
    <view1></view1>
    <view2></view2>
  </div>

</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      msg: "Demo，当前时间：" + new Date().toLocaleString(),
      seen: false,
      languages: ["Java", "C", "C++", "python", "JS"],
    };
  },
  methods: {
    reverseMessage: function () {
      this.msg = this.msg.split("").reverse().join("");
    },
  },
};
</script>

<style scoped>
</style>
